<template>
   <div>
        <button v-for="item in Data" :key="item.id" class="DataOne" @click="ToArticleDetail(item)">
            <div id="Flag" :style="item.tag.style">
               <div class="rectangle" >
                    {{item.tag.label}}
               </div>
               <div class="triangle"></div>
            </div>
            <div class="Content">
                  <div id="Title" class="overflow">{{item.title}}</div>
                  <div id="Detail" class="flex overflow">
                     <img :src="item.headphoto" class="headphoto">
                     <div class="name">作者:{{item.username}}</div>
                     <div class="type">类型:{{item.type || '自定义'}}</div>
                     <div class="time">发布于 {{item.createdTime | time}}</div>
                  </div>
            </div>
            <div class="BackImage">
                <img :src="item.createdCover" alt="" v-if="item.createdCover">
            </div>
        </button>

    
   
   </div>
</template>
<script>
import Pagination from '@/components/Package/Pagination/Pagination.vue'
import {mapActions,mapState} from 'vuex'
  export default 
  {
  components: { Pagination },
     name :'', 
     computed:{
        ...mapState('Personal',['Data','PersonalData'])
     },
     methods:{
        ...mapActions('Personal',['getSpaceArticle']),
         //前往文章详情
          ToArticleDetail(item){
      
            this.$router.push({path:'/articleDetail', query: {id:item.id} })
         },
           
     },
    
  }
</script>
<style scoped lang='less'>
.DataOne{
   background: var(--GeneralBackColor-half);
   width: 100%;
   margin-bottom: 10px;
   border-radius: 5px;
   position: relative;
   transition-duration: 0.3s;
}

@keyframes stripes {
to {background-size:100% 100%;}
}
 @media screen and (min-width: 601px){
   .DataOne:hover{
      background: linear-gradient( #efefef,#efefef) var(--GeneralBackColor-half) no-repeat 0 0;
      background-size: 0 100%;
      animation: stripes 0.3s linear 1 forwards;
      transform: scale(1.01);
      #Title{color:black}
      #Detail{
         color:black;
      }

   }
 }
 /* 平板或手机 */
 @media screen and (max-width: 600px){

   div.BackImage{
      display: block;
   }
   div#Flag{display: none;}
   div.Content{
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      padding: 10px;
   }
   div#Title{color:white;text-align: center;}
   div#Detail{
      color:white;
      display:block;
      .time{color:white}
   }

 }
//背景照片
.BackImage{
   display: none;
   position: absolute;
   width: 100%;
   height: 100%;
   left: 0;top: 0;
   overflow: hidden;
   z-index: 1;

   img{
      object-fit: cover;
       width: 100%;
      height: 100%;
   }
}
.Content{
     position: relative;
     width: 100%;
     left: 0;top: 0;
     z-index: 5;
     padding: 10px 20px;
     padding-left: 80px;
     box-sizing: border-box;
     border-radius: 5px;
}
// 标签
#Flag{
   --Color:#66B1FF;
   --Size:7px;
    position: absolute;
    left: -13px;
    top: 20px;
    z-index: 10;

   .rectangle{
         width: 80px;
         height: 30px;
         background: var(--Color);
         line-height: 30px;
         text-align: center;
         color: white;
         font-weight: 600;      
   }
  
   .triangle{
      width: 0;height: 0;
      border-top: var(--Size) solid var(--Color);
      border-right: var(--Size) solid var(--Color);
      border-bottom: var(--Size) solid rgba(0, 0, 0, 0);
      border-left: var(--Size) solid rgba(0, 0, 0, 0);
   }
}
// 标题
#Title{
   // color: #66B1FF;
   font-size: 20px;
   font-style: italic;
   margin-bottom: 10px;
   color: var(--fontColor);
   text-align: left;
}
// 详情
#Detail{
   
    justify-content: flex-start;
    font-size: 14px;
    color: var(--fontColor);
 
   img{
      width: 40px; height: 40px;
      margin-right: 5px;
   }
   .type{
      margin: 0 5px;
   }
  
}
</style>